<template>
  <div>
    <h2>路由嵌套</h2>
    <div class="group">
      <!-- 父组件预留一个<router-view> -->
      <router-view></router-view>
    </div>
    <div class="group">
      <button type="button" @click="rPush">router.push跳转</button>
      <button type="button" @click="editIsLogin">改变登录状态</button>
    </div>
    <div class="group">
      <!-- 默认视图 -->
      <router-view />
      <router-view name="siderbar" />
    </div>
    <div class="group">
      <h3>LoginPage - replace 属性</h3>
      <LoginPage></LoginPage>
    </div>
    <div class="group">
      <h3>测试pinia之store1</h3>
      <sonDemo3></sonDemo3>
    </div>
    <div class="group">
      <h3>测试pinia之store2</h3>
      <SonDemo4></SonDemo4>
      <div class="note">
        <p>defineStore 定义的响应式变量、计算属性、函数等都能实现无论在哪里使用，均能数据同步</p>
      </div>
    </div>
    <div class="group">
      <h3>测试pinia之store3（storeToRefs）</h3>
      <SonDemo4></SonDemo4>
      <div class="note">
        <p>解构会失去响应式，需要用storeToRefs转化为响应式变量</p>
        <p>不建议解构，因为不方便查看是否为store变量</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import LoginPage from './studySonRouter/LoginPage.vue'
import SonDemo3 from './studySonRouter/sonDemo3.vue'
import SonDemo4 from './studySonRouter/sonDemo4.vue'

// 编程式导航
const router = useRouter() // 路由对象：调用对象的方法
// replace 常用于登录失败

/**
 * 模拟登录状态
 */
let isLogin = true

function editIsLogin() {
  isLogin = !isLogin
}
const rPush = () => {
  if (isLogin) {
    router.push({
      name: 'sonDemo1',
      query: {
        id: 1,
        title: '新闻标题',
        content: '内容'
      }
    })
  } else {
    router.replace({ name: 'ErrorPage' })
  }
}
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.group {
  border: 4px solid rgb(102, 215, 85);
  margin: 10px;
  padding: 10px;
}
.group3 {
  border: 2px solid rgb(64, 163, 199);
  margin: 10px;
  padding: 10px;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
